<template>
  <div
    id="we"
    v-loading="loading"
    element-loading-text="拼命连接中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <el-container>
      <el-header>
        <div class="header">
          <p class="positionStystem">OPC数据采集系统</p>
          <div @click="createLink">
            <img src="../assets/images/未标题-6.png" alt="" />
          </div>
          <div @click="createTask">
            <img src="../assets/images/未标题-8.png" alt="" />
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside class="leftmenu">
          <el-menu
            :unique-opened="true"
            :default-active="activeIndex"
            :default-openeds="expandMenu"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#D4E6FF"
            text-color="#212121"
          >
            <el-submenu
              :index="index + ''"
              v-for="(item, index) in menu"
              :key="index"
            >
              <template slot="title">
                <span class="ignoreText" :title="item.host"
                  >{{ item.host }}
                  <!-- 两种情况一种 currentLink 如果有hostId 则为true 否则为false -->
                  <!-- 另外一种情况 Linkhost 如果success则为true 否则为 false -->
                  <img
                    v-if="!hostStatus[index]"
                    src="../assets/images/redCircle.png"
                    alt=""
                  />

                  <img
                    v-if="hostStatus[index]"
                    src="../assets/images/greenCircle.png"
                    alt=""
                  />
                </span>
                <span class="icon">
                  <i class="el-icon-edit" @click.stop="editeHost(item)"></i>
                  <i class="el-icon-delete" @click.stop="deleteHopst(item)"></i>
                </span>
              </template>
              <el-menu-item
                :index="index + '-' + index1"
                v-show="item.children.length > 0"
                v-for="(item1, index1) in item.children"
                :key="index1 + '-' + index"
                @click="handleMenu(item1, index1)"
              >
                <span class="ignoreText" :title="item1.progId">
                  {{ item1.progId }}
                  <!-- opcserver状态仅凭点击后的result决定 -->

                  <img
                    v-if="!opcServerStatus[index1]"
                    src="../assets/images/redCircle.png"
                    alt=""
                  />

                  <img
                    v-if="opcServerStatus[index1]"
                    src="../assets/images/greenCircle.png"
                    alt=""
                  />
                </span>
                <!-- <span class="icon">
                  <i class="el-icon-edit" @click.stop=""></i>
                  <i class="el-icon-delete" @click.stop=""></i>
                </span> -->
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="采集任务" name="first">
              <el-table
                border
                row-class-name="taskTable"
                :data="tableDataTask"
                style="width: 100%"
              >
                <el-table-column align="center" prop="taskId" label="ID">
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="taskName"
                  label="任务名称"
                >
                </el-table-column>
                <el-table-column align="center" prop="period" label="执行周期">
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="targetUrl"
                  label="目标地址"
                >
                </el-table-column>
                <el-table-column align="center" prop="bound" label="状态">
                  <template slot-scope="scope">
                    <img
                      v-if="scope.row.bound == false"
                      class="circle"
                      src="../assets/images/redCircle.png"
                      alt=""
                    />
                    <img
                      v-if="scope.row.bound == true"
                      class="circle"
                      src="../assets/images/greenCircle.png"
                      alt=""
                    />
                  </template>
                </el-table-column>

                <el-table-column
                  width="380"
                  align="center"
                  prop="address"
                  label="操作"
                >
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      v-if="scope.row.bound == false"
                      @click="handleStart(scope.row)"
                    >
                      启动
                    </el-button>
                    <el-button
                      type="primary"
                      v-if="scope.row.bound == true"
                      @click="handleStop(scope.row)"
                    >
                      停止
                    </el-button>
                    <el-button type="primary" @click="handleDetail(scope.row)">
                      详情
                    </el-button>
                    <el-button
                      class="deleteButton"
                      type="danger"
                      @click="handleDeleteTask(scope.row)"
                    >
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="采集点" name="second">
              <el-table border :data="tableDataDottes" style="width: 100%">
                <el-table-column type="index" align="center" width="130">
                </el-table-column>
                <el-table-column
                  width="500"
                  align="center"
                  prop="itemId"
                  label="采集点ID"
                >
                </el-table-column>

                <el-table-column
                  align="center"
                  prop="address"
                  label="采集点状态"
                >
                  <template slot-scope="scope">
                    <img
                      v-if="scope.row.state == 1"
                      class="circle"
                      src="../assets/images/redCircle.png"
                      alt=""
                    />
                    <img
                      v-if="scope.row.state == 2"
                      class="circle"
                      src="../assets/images/greenCircle.png"
                      alt=""
                    />
                    <img
                      v-if="scope.row.state == 0"
                      class="circle"
                      src="../assets/images/blueCircle.png"
                      alt=""
                    />
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="address" label="操作">
                  <template slot-scope="scope">
                    <el-button
                      v-if="scope.row.taskId"
                      type="primary"
                      @click="handleotherTasks(scope.row)"
                    >
                      查看相关任务
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            
            <el-tab-pane label="其他" name="third">
              <el-table border :data="otherData" style="width: 100%">
                <el-table-column type="index" align="center" width="130">
                </el-table-column>
                <el-table-column
                  width="500"
                  align="center"
                  prop="name"
                  label="名称"
                >
                </el-table-column>

                <el-table-column
                  width="500"
                  align="center"
                  prop="value"
                  label="数值"
                >
                </el-table-column>
                <el-table-column align="center" prop="operate" label="操作">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      @click="openUpdateOther(scope.row)"
                    >
                      编辑
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>
    <!-- 创建连接弹窗 -->
    <el-dialog
      title="创建连接"
      :visible.sync="linkVisible"
      width="30%"
      :before-close="handleLinkClose"
    >
      <el-form
        ref="form1"
        label-position="left"
        label-width="130px"
        :model="formLink"
      >
        <p>Server：</p>
        <el-form-item label="服务器地址：">
          <el-input v-model="formLink.host"></el-input>
        </el-form-item>
        <el-form-item label="domain：">
          <el-input v-model="formLink.domain"></el-input>
        </el-form-item>
        <p>认证：</p>

        <el-form-item label="用户名：">
          <el-input v-model="formLink.user"></el-input>
        </el-form-item>
        <el-form-item label="密码：">
          <el-input v-model="formLink.password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleLinkClose">取 消</el-button>
        <el-button type="primary" @click="createConfirmLink">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 创建任务弹窗 -->
    <el-dialog
      title="创建任务"
      ref="form2"
      :visible.sync="taskVisible"
      width="30%"
      :before-close="handleTaskClose"
    >
      <el-form
        ref="form2"
        label-position="left"
        label-width="110px"
        :model="formTask"
      >
        <el-form-item label="任务名称：">
          <el-input v-model="formTask.taskName"></el-input>
        </el-form-item>
        <el-form-item label="执行周期：">
          <el-input v-model="formTask.period"></el-input>
        </el-form-item>

        <el-form-item label="任务地址：">
          <el-input v-model="formTask.targetUrl"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleTaskClose">取 消</el-button>
        <el-button type="primary" @click="confirmCreateTask">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 详情及查看相关任务 -->
    <el-dialog
      title="任务详情"
      :visible.sync="detailVisible"
      width="30%"
      :before-close="handleDetailClose"
    >
      <el-form
        ref="form3"
        label-position="left"
        label-width="80px"
        :model="formTask"
      >
        <el-form-item label="任务名称：">
          <el-input v-model="formDeatil.taskName" disabled></el-input>
        </el-form-item>
        <el-form-item label="执行周期：">
          <el-input v-model="formDeatil.period" disabled></el-input>
        </el-form-item>
        <el-form-item label="任务地址：">
          <el-input v-model="formDeatil.targetUrl" disabled></el-input>
        </el-form-item>
        <el-form-item label="采集点：">
          <el-select
            v-model="valueDot"
            collapse-tags
            :multiple-limit="10"
            multiple
            placeholder="请选择"
            @change="changeDottes"
          >
            <el-option
              v-for="item in selectedDottes"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <el-table
        border
        row-class-name="taskTable"
        :data="selectedDottesTableData"
        style="width: 100%"
      >
        <el-table-column align="center" prop="dot" label="已选采集点">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleDetailClose">取 消</el-button>
        <el-button type="primary" @click="inputCNData">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 输入标题，中文采集点，-->
    <el-dialog
      title="采集点信息"
      :visible.sync="cNVisible"
      width="30%"
      :before-close="handCNclose"
    >
      <el-form
        ref="form4"
        label-position="left"
        label-width="200px"
        :model="e2cData"
      >
        <el-form-item label="标题：">
          <el-input v-model="e2cData.title"></el-input>
        </el-form-item>
        <el-form-item label="背景颜色：">
          <el-color-picker v-model="e2cData.bgcolor" size="mini"></el-color-picker>
        </el-form-item>
        <el-form-item v-for="(item, index) in e2cData.e2cDataList" :key="index" :label="item.label">
          <el-input v-model="item.value"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handCNclose">取 消</el-button>
        <el-button type="primary" @click="confirmDetailTask">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 其他信息修改-->
    
    <el-dialog title="修改信息" :visible.sync="otherDataVisible">
      <el-form :model="otherDataform">
        <el-form-item :label="otherDataform.name">
          <el-input v-model="otherDataform.value" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="otherDataVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateOtherData()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { apiGet, apiPost, apiDelete, path } from '../api/api'
export default {
  data() {
    return {
      // 初始化已选采集点
      defaultTable: [],
      loading: true,
      // host状态
      hostStatus: [],
      // opcserver状态
      opcServerStatus: [],
      // 详情弹窗
      detailVisible: false,
      // 任务详情
      formDeatil: {},
      // 可续采集点
      selectedDottes: [],
      // 选择的采集table
      selectedDottesTableData: [],
      valueDot: [],
      activeIndex: '',
      expandMenu: [],
      menu: [],
      linkVisible: false,
      taskVisible: false,
      formLink: {
        host: '',
        domain: '',
        user: '',
        password: ''
      },
      formTask: {
        taskName: '',
        period: '',
        targetUrl: ''
      },
      activeName: 'first',
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      tableDataTask: [],
      tableDataDottes: [],
      // 采集点中文相关
      cNVisible: false,
      e2cData:{
        "bgcolor": "#000000",
        "title":"",
        "e2cDataList":[
        ],
      },
      otherData: [
        {
          "name": "值班",
          "value": "dqwdqwd"
        }
      ],
      otherDataVisible: false,
      otherDataform:{}
    }
  },
  async created() {
    // console.log('path',path,apiGet,apiPost)
    await this.baseInfo()
    await this.currentLinkEvent()
    this.getOtherDatas()
    this.loading = false
  },
  methods: {
    //   采集任务
    async getAllTask() {
      const result = await apiGet(path.task, {}, '', '')
      if ((result.result = 'SUCCESS')) {
        console.log('data', result)
        this.tableDataTask = result.data
        // this.$message.success('获取采集任务成功')
      } else {
        // this.$message.error('获取采集任务失败')
      }
    },
    //   采集点
    async getAllDottes() {
      const result = await apiGet(path.allDottes, {}, '', '')
      if ((result.result = 'SUCCESS'&&result.data)) {
        console.log('data', result)
        this.tableDataDottes = result.data
        this.selectedDottes = []
        result.data.map(item => {
          if (item.state == 0) {
            this.selectedDottes.push(item.itemId)
          }
        })
        console.log('this.selectedDottes', this.selectedDottes)
      } else {
      }
    },
    //   创建任务
    async confirmCreateTask() {
      this.taskVisible = false

      const result = await apiPost(path.createTask, this.formTask, '', '')
      this.loading = true

      if ((result.result = 'SUCCESS')) {
        this.loading = false
        this.$message.success('创建任务成功')
      } else {
        this.loading = false
        this.$message.error('创建任务失败')
      }
      this.formTask={}
      this.getAllTask()
    },
    // 确认创建连接
    async createConfirmLink() {
      this.linkVisible = false
      let form = {}
      if (this.formLink.id) {
        form = {
          domain: this.formLink.domain,
          host: this.formLink.host,
          password: this.formLink.password,
          user: this.formLink.user,
          id: this.formLink.id
        }
      } else {
        form = this.formLink
      }
      console.log('form', form, this.formLink)
      this.loading = true

      const result = await apiPost(path.createHost, form, '', '')

      if ((result.result = 'SUCCESS')) {
        this.loading = false
        this.$message.success('创建连接成功')
      } else {
        this.loading = false
        this.$message.error('创建连接失败')
      }

      this.$router.go(0)
      //   this.getAllTask()
      // 若创建连接成功获取所有采集点
      //   if (result.result == 'SUCCESS') {
      //     const params = { progId: result.data[0].progId }
      //     const resultDottes = await apiPost(path.linkServer, params, '', '')
      //     this.tableDataDottes = resultDottes.data
      //   }
    },
    // 启动采集任务
    async handleStart(row) {
      this.loading = true

      const result = await apiGet(path.runTask + row.taskId, {}, '', '')
      if (result.result == 'SUCCESS') {
        this.loading = false
        this.$message.success('启动采集任务成功')

        console.log(this.tableDataTask)
        this.tableDataTask.map(element => {
          if ((element.taskId == result.data.taskId)) {
            element.bound = true
          }
        })
      } else {
        this.loading = false
        this.$message.error('启动采集任务失败')
      }
    },
    // 停止采集任务
    async handleStop(row) {
      this.loading = true

      const result = await apiGet(path.stopTask + row.taskId, {}, '', '')
      if (result.result == 'SUCCESS') {
        this.loading = false

        this.$message.success('停止采集任务成功')
        this.tableDataTask.map(element => {
          if ((element.taskId == result.data.taskId)) {
            element.bound = false
          }
        })
      } else {
        this.loading = false

        this.$message.error('停止采集任务失败')
      }
      // this.$router.go(0)
    },
    // 删除采集任务
    async handleDeleteTask(row) {
      this.loading = true

      const result = await apiDelete(path.deleteTask + row.taskId, {}, '', '')
      if (result.result == 'SUCCESS') {
        this.loading = false

        this.$message.success('删除采集任务成功')
      } else {
        this.loading = false

        this.$message.error('删除采集任务失败')
      }
      this.$router.go(0)
    },

    // 详情按钮事件
    handleDetail(row) {
      this.formDeatil = row
      this.getAllDottes()
      if (row.itemIds) {
        // this.valueDot = row.itemIds
        this.defaultTable = []

        row.itemIds.map(item => {
          this.defaultTable.push({
            dot: item
          })
        })
        console.log('详情', row, this.defaultTable)

        this.selectedDottesTableData = this.defaultTable
      }

      // this.selectedDottesTableData = row.itemIds
      this.detailVisible = true
    },
    // 查看相关任务
    async handleotherTasks(row) {
      this.loading = true

      const result = await apiGet(path.singleTask + row.taskId, {}, '', '')
      this.loading = false
      this.formDeatil = result.data
      if (result.data.itemIds) {
        this.defaultTable = []

        result.data.itemIds.map(item => {
          this.defaultTable.push({
            dot: item
          })
        })
        this.selectedDottesTableData = this.defaultTable
      }
      this.detailVisible = true
    },

    // 选择采集点
    changeDottes(value) {
      console.log('value', value, this.defaultTable)
      this.selectedDottesTableData = []
      value.map(item => {
        this.selectedDottesTableData.push({
          dot: item
        })
      })
      this.selectedDottesTableData = [
        ...this.defaultTable,
        ...this.selectedDottesTableData
      ]
    },
    // 弹出中文输入框输入
    async inputCNData(){
      var _this = this
      this.selectedDottesTableData.forEach(function (item, index, arr){
        _this.e2cData.e2cDataList.push({
          "label": item.dot,
          "value": ""
        })
      })
      this.cNVisible = true
    },
    // 确认详情
    async confirmDetailTask() {
      this.loading = true

      this.detailVisible = false
      var itemId2CN = {}
      var paramStrList = []
      this.e2cData.e2cDataList.forEach((element, index) => {
        itemId2CN[element['label']] = element.value
        paramStrList.push(element["label"] + "equal" + element["label"])
      })
      const params = {
        taskId: this.formDeatil.taskId,
        itemIds: this.valueDot,
        itemId2CN: itemId2CN,
        title:this.e2cData.title,
        // bgColor: this.e2cData.bgcolor
      }
      console.log('params', params)
      const result = await apiPost(
        path.createDottes,
        JSON.stringify(params),
        '',
        ''
      )
      this.loading = false
      var returnUrl = window.location.href.split("/#/")[0] +
          "/#/showData?" + "bgColor=" + this.e2cData.bgcolor.split("#")[1] + "amp" + paramStrList.join("amp")
      console.log(returnUrl)

      if (result.result == 'SUCCESS') {
        // this.$router.go(0)
        this.$message.success('添加采集点成功！')
        this.$alert(`<p style="overflow: auto">${returnUrl}</p>`, '展示页面链接', {
                  confirmButtonText: '确定',
                  dangerouslyUseHTMLString: true,
                  callback: action => {
                    this.$message({
                      type: 'info',
                      message: `action: ${ action }`
                    });
                  }
                });

      } else {
        this.$message.error('添加采集点失败！')
      }
      this.handCNclose()
      this.handleDetailClose()

    },
    handleDetailClose() {
      this.detailVisible = false
      this.valueDot = []
      this.selectedDottesTableData = []
    },
    // 查看左侧基本配置信息
    async baseInfo() {
      const result = await apiGet(path.allLink, {}, '', '')
      // result.data=[{host:'127.0.0.1.0',children:[]}]
      result.data.map(item => {
        item.children = []
      })
      this.menu = result.data
    },
    // 菜单栏展开
    async handleOpen(key, keyPath) {
      this.loading = true
      this.hostStatus.forEach((element, index) => {
        this.hostStatus[index] = false
      })
       this.opcServerStatus.forEach((element, index) => {
          this.opcServerStatus[index] = false
        })
      console.log('zhankai', this.hostStatus)
      const result = await apiGet(path.currentLink, {}, '', '')

      if (result.data.hostId) {
        this.hostStatus[key] = true
        if (result.data.progId) {
          console.log('this.menu11', this.menu)
          this.menu.map(item => {
            item.children.map((item2, index2) => {
              if (item2.progId == result.data.progId) {
                this.opcServerStatus[index2] = true
              }
            })
          })

          await this.getAllTask()
          await this.getAllDottes()
        }
      } else {
        this.hostStatus[key] = false
      }

      if (result.data.hostId && result.data.hostId == this.menu[key].id) {
        const result1 = await apiGet(path.allServers, {}, '', '')

        this.menu[key].children = result1.data
      } else {
        // LIANJIE HOST
        // qingchu  chushihua shuju
        this.tableDataTask = []
        this.tableDataDottes = []
        this.selectedDottes = []
        this.opcServerStatus.forEach((element, index) => {
          this.opcServerStatus[index] = false
        })
        console.log(key, keyPath, this.menu)
        const params = {
          host: this.menu[key].host,
          user: this.menu[key].user,
          password: this.menu[key].password,
          domain: this.menu[key].domain,
          id: this.menu[key].id
        }
        const data = await apiPost(path.linkHost, params, '', '')

        if (data.result == 'SUCCESS') {
          this.menu[key].children = data.data
          this.hostStatus[key] = true
          // this.currentLinkEvent()

          this.$message.success('连接成功')
        } else {
          // this.currentLinkEvent()
          this.$message.error(data.message)
          this.hostStatus[key] = false
          // this.$router.go(0)
        }
      }
      // // 测试多个
      // this.menu[0].children.push({
      //   progId:'111111'
      // })
      this.loading = false
    },
    // 连接opcServer
    async handleMenu(item, index) {

      this.loading = true

      console.log('menu', item,this.opcServerStatus)

      if (this.opcServerStatus[index] == true) {
        this.getAllDottes()
        this.getAllTask()
      } else {
         // 清除全部状态
        this.opcServerStatus.map((item,index)=>{
          console.log(item)
          this.opcServerStatus[index] = false
        })
        const params = {
          progId: item.progId
        }
        const result = await apiGet(path.linkServer, params, '', '')
        if (result.result == 'SUCCESS') {
          this.opcServerStatus[index] = true
          this.$message.success('连接成功')
        } else {
          this.opcServerStatus[index] = false
          this.$message.error(result.message)

        }
        this.tableDataDottes = result.data
      }
      this.activeName = 'second'

      this.loading = false
    },
    // 查看当前连接的host和opcServer
    async currentLinkEvent() {
      this.loading = true

      const result = await apiGet(path.currentLink, {}, '', '')
      console.log('当前连接', this.menu, result.data)
      if (result.data.hostId) {
        this.menu.map((item, index) => {
          this.hostStatus[index] = false
        })
        console.log('this.menu', this.menu)
        this.menu.map((item, index) => {
          if (item.id == result.data.hostId) {
            this.hostStatus[index] = true
          }
        })
      }
      console.log('expands', this.expandMenu)
      if (result.data.progId) {
        this.expandMenu = this.menu.map((item, index) => {
          if (item.id == result.data.hostId) {
            return index
          }
        })
        this.getAllTask()
        this.getAllDottes()
        const result1 = await apiGet(path.allServers, {}, '', '')
        console.log('展开', this.expandMenu)
        // 塞入展开submenu的children
        this.menu[this.expandMenu[0]].children = result1.data
        // 设置选中menu的状态
        this.menu.forEach((item, index) => {
          item.children.forEach((item1, index1) => {
            console.log(11111)
            if (item1.progId == result.data.progId) {
              this.opcServerStatus[index1] = true
            }
          })
        })

        result1.data.map((item, index) => {
          if (item.progId == result.data.progId) {
            this.activeIndex = this.expandMenu[0] + '-' + index
          }
        })
      }
      this.loading = false

      // this.activeIndex
    },
    // 点击编辑
    editeHost(row) {
      this.linkVisible = true
      this.formLink = row
      console.log(row)
    },
    async deleteHopst(row) {
      this.loading = true

      console.log('row', row)
      const result1 = await apiDelete(path.deleteHostData + row.id, {}, '', '')
      if (result1.data) {
        this.$message.success('删除host成功')
      }
      this.loading = false

      this.$router.go(0)
    },
    // 菜单栏关闭
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    // 创建连接
    createLink() {
      // 创建连接弹窗显示
      this.linkVisible = true
    },
    // 关闭连接弹窗
    handleLinkClose(done) {
      this.linkVisible = false
      this.$refs.form1.resetFields()
      this.formLink = {}
    },
    // 创建任务
    createTask() {
      // 创建任务弹窗显示
      this.taskVisible = true
    },
    // 关闭任务弹窗
    handleTaskClose(done) {
      this.taskVisible = false
      this.$refs.form2.resetFields()
      this.formTask = {}
    },
    // 关闭中文弹窗
    handCNclose(done){
      this.cNVisible = false
      this.e2cData = {
        "bgcolor": "#000000",
        "title": "",
        "e2cDataList": [],
      }
    },
    // tab切换
    handleClick(tab, event) {
      console.log(tab, event, this.activeName)
      if (this.activeName == 'first') {
        this.getAllTask()
      } else {
        this.getAllDottes()
      }
    },
    async getOtherDatas(){
      const result1 = await apiGet(path.getOtherDatas, {}, '', '')
      this.otherData = result1.data
    },
    openUpdateOther(otherData){
      this.otherDataVisible = true;
      this.otherDataform = otherData;
    },
    async updateOtherData(){
      
      const result = await apiPost(path.updataOtherData, this.otherDataform, '', '')
      this.loading = true

      if ((result.result = 'SUCCESS')) {
        this.loading = false
        this.$message.success('修改成功')
      } else {
        this.loading = false
        this.$message.error('修改失败')
      }
      this.otherDataVisible = false;
    }
  }
}
</script>

<style scoped>
li {
  list-style: none;
}
.el-header,
.el-footer {
  background-color: #2063aa;
  color: #333;
  text-align: center;
  height: 70px !important;
  /* line-height: 70px; */
}

.leftmenu {
  width: 400px !important;
  /* width: 30%; */
  background-color: #d4e6ff;
  color: #333;
  text-align: center;
  line-height: 200px;
}
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
}
.positionStystem {
  font-size: 30px;
  color: #ffffff;
  position: absolute;
  left: 10px;
  /* top: -10px; */
}
.header div {
  padding-top: 5px;
}
.header img {
  width: 98px;
  height: 84px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  /* line-height: 160px; */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-tabs >>> .el-table tr,
.el-tabs >>> .el-table th {
  background-color: #d4e6ff;
}
.el-tabs >>> .el-table td,
.el-tabs >>> .el-table th {
  border-color: #c5c5c5;
}
.el-button:not(.deleteButton) {
  border-radius: 20px;
  background-color: #2063aa;
  color: #fff;
}
.deleteButton {
  border-radius: 20px;
}
.circle {
  width: 17px;
  height: 17px;
}
.el-icon-edit,
.el-icon-delete {
  font-weight: 700;
  color: #2063aa;
}
.el-menu >>> .el-submenu__title,
.el-menu >>> .el-menu__title {
  position: relative;
  /* text-align: left; */
}
.el-menu >>> .ignoreText {
  display: inline-block;
  width: 210px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* position: relative; */
}
.el-menu >>> .ignoreText img {
  width: 24px;
  height: 24px;
  position: absolute;
  right: 100px;
  top: 50%;
  transform: translateY(-40%);
}
.el-menu >>> li {
  text-align: left;
}
.icon {
  position: absolute;
  /* margin-left: 20px; */
  left: 300px;
}

.el-menu >>> .el-submenu__icon-arrow:before {
  /* content: "\e6d7"; */
  /* position: absolute;
    left: -10px; */
}
.el-select {
  width: 423px;
}
</style>
